<!-- 商品列表组件 <good-list :list="xx"></good-list> -->
<template>
	<view class="goods-list">
		<view class="list-box">

			<view class="list flex-box" v-for="(item,index) in list" @click="onSkip(item.id,tab)" :key="index">
				<image mode="scaleToFill" class="pictrue" :src="item.imglogo"></image>
				<view class="msg-box box-1">
					<view class="tag one-omit">
						{{item.title}}
					</view>
					<view class="msg one-omit">
						{{item.desc}}
					</view>
					<text class="sell-num">已售出{{item.stock||0}}件</text>
					<view class="price-info flex-box">
						<view class="user-price box-1">
							<text class="min">￥</text>
							<text class="max">{{item.price || 0}}</text>
						</view>
						<view class="pay-btn">立即购买</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			tab: {
				type: Number,
				default () {
					return 0
				}
			},
			list: {
				type: Array,
				default () {
					return []
				}
			},
			swLevel: {
				type: Number,
			},
		},
		methods: {
			/**
			 * 跳转点击
			 * @param {String} id 跳转
			 */
			onSkip(id, tab) {
				// if (tab == 2) {
				// 	uni.navigateTo({
				// 		url: '/pages/GoodsDetails/lrGoodsDetails?id=' + id
				// 	})
				// 	return false
				// }
				uni.navigateTo({
					url: '/pages/GoodsDetails/GoodsDetails?id=' + id
				})
				return false

			}
		}
	}
</script>

<style lang="scss">
	.t1,
	.t2,
	.t3 {
		font-size: 22rpx !important;
		padding: 2rpx 6rpx !important;
	}

	.t1 {
		//保税
		background: rgb(92, 179, 108) !important;
	}

	.t2 {
		//直邮
		background: rgb(209, 34, 39);
	}

	.t3 {
		//一般贸易
		background: rgb(244, 164, 53);
	}

	/* 为你推荐 */
	.goods-list {
		display: block;
		width: 100%;
		padding: 0 20rpx;
		background-color: #F7F7F7;
	}

	.list-box {
		padding: 20rpx;
		background: #fff;
		border-radius: 20rpx;

		.list {
			margin-bottom: 30rpx;
			background-color: #F7F7F7;
			border-radius: 10rpx;

			.pictrue {
				width: 240rpx;
				display: block;
				border-radius: 20rpx 20rpx 0 0;
				height:240rpx;
				margin-right:20rpx;
			}
			.msg-box{
				width: 100%;
				display: block;
				padding:20rpx 0;
				.tag {
					font-size: 30rpx;
					line-height: 40rpx;
					font-weight: bolder;
				}
				.msg{
					min-height:30rpx ;
					line-height: 30rpx;
					font-size:24rpx;
				}
				.sell-num{
					background: rgba(208,34,39,0.1);
					display: inline-block;
					padding:0 20rpx;
					margin:10rpx 0;
					color:#D02227;
				}
			}

			.price-info {
				padding-right:20rpx;
				justify-content: flex-start;
				align-items: flex-end;
				.pay-btn{
					background-color:#D02227;
					font-size:28rpx;
					color: #fff;
					border-radius: 40rpx;
					padding:10rpx 30rpx;
					word-break: keep-all;
				}
				.user-price {
					font-weight: bolder;
					color: #D02227;

					.min {
						font-size: 22rpx;
					}

					.max {
						font-size: 32rpx;
					}
				}
			}
		}
	}

	.recommend-info {
		width: 100%;
		background-color: #f2f2f2;

		.recommend-title {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			// height: 100rpx;
			margin-bottom: 30rpx;

			.title {
				display: flex;
				align-items: center;

				image {
					width: 750rpx;
					height: 80rpx;
				}
			}
		}

	}
</style>